<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				background-color: #ADD8E6;
			}
			#box{
				width:350px;
				margin:0 auto;
			}
			#btn{
				width:350px;
				height:50px;
				line-height: 50px;
				text-align: center;
			}
			#image{
				width:350px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<button id="btn">隐藏</button>
			<br>
			<img id="image" src="img/01.jpg" alt="">
		</div>
		<script>
			//1. 点击按钮---先找到按钮元素，给按钮添加点击事件
			//找到按钮元素
			var btn=document.getElementById("btn");
			//找到图片元素
			var img=document.getElementById("image");
			//给按钮添加点击事件
			btn.onclick=function(){
				if(btn.innerHTML=="隐藏"){//隐藏
					//按钮文字由隐藏改为显示
					btn.innerHTML="显示";
					//图片隐藏---》找到图片元素
					img.style.display="none";
				}else{//显示
					//按钮文字由显示改为隐藏
					btn.innerHTML="隐藏";
					//图片显示
					img.style.display="block";
				}
			}
		</script>
	</body>
</html>
